another possibly-relevant file:

http://wise4-qa.telscenter.org/vlewrapper/vle/node/SVGDrawNode.js

svgicons/jquery.svgicons.js

As of commit 4594962 on 3/1/2010, a few small edits have been made to this file, including one that hardcodes a VLE-specific url for the edit icons, in lines 348-360:

				svg_el.find('[fill="url(#' + id + ')"]').each(function() {
					//$(this).attr('fill', 'url(#' + new_id + ')');
					// fix for wise4 url() reference problems
					$(this).attr('fill', 'url(/vlewrapper/vle/node/draw/svg-edit-2.4rc1/images/svg_edit_icons.svg#' + id + ')');
				}).end().find('[stroke="url(#' + id + ')"]').each(function() {
					//$(this).attr('stroke', 'url(#' + new_id + ')');
					// fix for wise4 url() reference problems
					$(this).attr('stroke', 'url(/vlewrapper/vle/node/draw/svg-edit-2.4rc1/images/svg_edit_icons.svg#' + id + ')');
				}).end().find('use').each(function() {
					if(this.getAttribute('xlink:href') == '#' + id) {
						this.setAttributeNS(xlinkns,'href','#' + new_id);
					}
				});

Note

The following are derived after comparing Stephen's wise4-svg-edit commit b12d149 vs. svg-edit revision 1145 and running Firebug on http://wise4-qa.telscenter.org/webapp/student/vle/vle.html?runId=252&workgroupId=10388 on 3/2/2010

svg-editor.js:

The only changes relating to VLE are in code appended at end of the file:

1. commenting-out of the following:

          svgCanvas = svg_edit_setup();
          put_locale(svgCanvas);
          

2. Addition of VleDS constructor (under global name 'VleDS') and its method definitions

All other changes relate to interface changes and interaction with new svgcanvas functionality created by WISE4 team

svgcanvas.js:

• some interface changes
• addition of stamp and snapshot functionality:
  • new vars ('private properties') in the svgcanvas object:

    images 
    currStamp
    snapshotOpen 

  • new (public) methods:

    setStampImages
    setStamp
    setSnapState
    getSnapState
    resetUndo (apparently just duplicates functionality of the private resetUndoStack method already in svg-edit's svgcanvas, but is public)

svg-editor.html:

new buttons and UI changes for WISE4-related functionality like snapshots, descriptions, etc (the visible stuff)
addition of a script node that hooks into the VLE to run the svg-edit startup code. See my analysis at http://confluence.concord.org/display/CSP/Notes+on+startup+sequence+of+WISE4-embedded+svg-edit

embedapi.js:

(unchanged)

–

svgdrawstate.js:

FIRST, A NOTE ON HOW DATA IS SAVED:
—
before a SVGdraw VLE node (i.e., the iframe containing svg-editor.html) unloads, the following line of code is executed:

     var svgString = svgdraw.savetoVLE();   // (line 45, svg-editor.html)
  

savetoVLE() calls VleDS.prototype.save() which is on line 2671 of svg-editor.js

save() in turn calls View.prototype.saveState() in vleview_studentwork.js ( http://wise4-qa.telscenter.org/vlewrapper/vle/view/vle/vleview_studentwork.js )

saveState() in turn creates a new SVGDRAWSTATE object (which just adds a timestamp to the generated state string)

    newState = new SVGDRAWSTATE(state);   // (line 271, vleview_studentwork.js)
  

saveState then pushes the state onto a stack which records the state of ALL previous visits by this student to this node (including previous sessions, apparently)

long story short, a 'postAllUnsavedNodeVisits' is fired in the onRenderNodeStart function (line 362. vleview_core.js) and this presumably posts data back to the server.

this results in a call to View.prototype.postUnsavedNodeVisit (line 80, vleview_studentwork.js) which uses YUI ConnectionManager to actually POST the data

The important point here is that SVGDRAWSTATE itself doesn't do a lot of work. The posting is handled elsewhere and the construction of the svg string is handled elsewhere.

svgdraw.js:

new constructors:

SVGDRAW

Snapshot

generates an object with a given svg string and id, and description taken from the canvas 'context' object)

methods of SVGDRAW:

init

calls svg_edit_setup, put_locale, this.loadModules

loadModules

Loads the details and options for this svgdraw node that were set by the author and then calls 'load' function to load student's saved state (the kind of thing this function handles are setting the stamp images, the description text if any and the default description text, the prompt text, i.e., the instructions to the student, and whether snapshots are enabled.

loadModules then creates a new VleDS object and passes it as argument to this.setDataService. Then it calls load method

load

just calls dataservice load method with 'this' as the context and loadCallback as the callback

setDataService

is just a setter for dataService; is called in loadModules with the new VleDS object as its argument

loadCallback

This is the callback passed to the dataService (i.e., VleDS object's) load method (See my notes on the wise4-svg-edit startup sequence elsewhere.) It is passed the JSON corresponding to the student's saved work.

This sets the state of svgdraw canva, description, annotations, and saved snapshots to the saved state of the student's work. Specifically, It sets the canvas SVG to the saved state of the student's work, then directly calls a VLE function to get 'annotations' for this node; it then calls the initDisplay method with the JSON file that was passed to it.

(The vle nodes in the test project I ran don't appear to have annotations, so I don't really know what annotations are for nor what they do.)

hint for analyzing the VLE function called: line 109 of svgdraw.js,

if(context.dataService.vle.getConfig().getConfigParam('mode') == 'run'){

references View.prototype.getConfig() which is defined on line 68 of config.js on the live site as of 3/3/2010)

Note that View is some kind of VLE "god object". Its constructor is in view.js and its method definitions are spread out in many js files: coreview.js, view_utils.js, config.js, and vleview_*.js (there are 9 such files, e.g., vlewview_audio.js, vleview_core.js...).

savetoVLE

saves svg of canvas, description, snapshots to 'studentData' then passes studentData to dataservice.save() method

initDisplay

Loads description, stamp images, snapshots and snapshot state to screen. initializes appropriate jQueryUI components for interacting with snapshots etc. Then it calls resetUndo to empty the undo stack.

newSnapshot

creates new Snapshot object; copies canvas svg to it; adds the new snapshot object to snapshot stack; calls addSnapshot

addSnapshot

scales svg to create thumbnail, adds the thumbnail to the thumbnail holder in the page and calls bindSnapshot; calls snapCheck after 100ms

openSnapshot

sets canvas svg to that of snapshot; it then (sensibly) calls resetUndo to remove the undo stack – which must be why resetUndo functionality was made into a public method by wise4 team

bindSnapshot

from comment: 'Binds snapshot thumbnail to click function that opens corresponding snapshot, delete function, hover function, sorting function')

deleteClick

click handler for snapshot delete buttons

snapClick

click handler for snapshot itself

updateClass

helper function for changing opacity of buttons on hover

snapCheck

Checks that there have been no further draw operations to the canvas since the last snapshot was loaded or saved. If there have not been, it highlights the current snapshot & sets the description to that of the snapshot, as after selecting a snapshot

(note: warningStackSize appears intended to keep track of whether any further draw operations have taken place since the last snapshot was taken. warningStackSize is set to the canvas's undoStackSize when a snapshot is taken, and set to 0 (as is the undoStackSize, via resetUndo) when a snapshot is loaded. As long as warningStackSize == UndoStackSize, we know no undoable operations have been applied to the canvas since the snapshot was taken/loaded. (If operations have been done, we should warn the user before switching snapshots.) By keeping track of the stack size, rather than just setting a flag when operations are done, we can deal with the case that undoable operations were done, but were then undone.

snapPlayback

changespeed

updateNumbers

updates html to reflect the new snapshot numbering after a reordering

setStampPreview

makes the stamp image track the cursor when mouse is in the canvas area but not when mousing over tool buttons

text2xml

grabbed from svg-edit; apparently just converts text representation of xml to formal xml string?